<template>
  <div class='hello'>
    <!-- 工具栏容器 -->
    <div id='toolbar-container'></div>
    <!-- 编辑器容器 -->
    <div id='editor'>
        <p>This is the initial editor content.</p>
    </div>
  </div>
</template>

<script>
import CKEditor from '../../static/ckeditor'
import {WordPaster} from '../../static/WordPaster/js/w'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    // 初始化
    WordPaster.getInstance({
      // 上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
      PostUrl: 'http://localhost:8891/upload.aspx',
      // 为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
      ImageUrl: 'http://localhost:8891{url}',
      // 设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
      FileFieldName: 'file'
      // 提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
    })
    this.initCKEditor()
  },
  methods: {
    initCKEditor () {
      CKEditor.create(document.querySelector('#editor')).then(editor => {
        const toolbarContainer = document.querySelector('#toolbar-container')
        toolbarContainer.appendChild(editor.ui.view.toolbar.element)
        this.editor = editor
        WordPaster.getInstance().SetEditor(editor)
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
